import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    redirect: '/home',
  },
  // 登陆权限
  {
    path: '/loginpermission',
    name: 'loginpermission',
    component: () => import('@/views/Loginpermission/index.vue'),
    meta: { showTabBar: false },
  },
  // 登陆
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/index.vue'),
    meta: { showTabBar: false },
  },
  // 注册
  {
    path: '/register',
    name: 'register',
    component: () => import('@/views/register/index.vue'),
    meta: { showTabBar: false },
  },
  // home
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/home/home.vue'),
    meta: { showTabBar: true },
  },
  // 分类
  {
    path: '/classification',
    name: 'classification',
    component: () => import('@/views/classification/classification.vue'),
    meta: { showTabBar: true },
  },
  // 购物车
  {
    path: '/cart',
    name: 'cart',
    component: () => import('@/views/cart/cart.vue'),
    meta: { showTabBar: true },
  },
  // 我的
  {
    path: '/my',
    name: 'my',
    component: () => import('@/views/my/my.vue'),
    meta: { showTabBar: true },
  },
  // 商品列表
  {
    path: '/productList',
    name: 'productList',
    // 传递参数
    component: () => import('@/components/home/productList.vue'),
    meta: { showTabBar: false },
  },
  // 商品详情
  {
    path: '/productDetails',
    name: 'detail',
    component: () => import('@/components/home/ProductDetails.vue'),
    meta: { showTabBar: false },
  },
  // 短信验证码
  {
    path: '/textmessage',
    name: 'textmessage',
    component: () => import('@/views/textmessage/index.vue'),
    meta: { showTabBar: false },
  },
  // 订单确认
  {
    path: '/orderConfirmation',
    name: 'orderConfirmation',
    component: () => import('@/components/cart/OrderConfirmation.vue'),
    meta: { showTabBar: false },
  },
  // 地址列表
  {
    path: '/addressList',
    name: 'addressList',
    component: () => import('@/components/cart/addressList.vue'),
    meta: { showTabBar: false },
  },
  // 新增地址
  {
    path: '/Addnewaddress',
    name: 'Addnewaddress',
    component: () => import('@/components/cart/Addnewaddress.vue'),
    meta: { showTabBar: false },
  },
  // 编辑地址
  {
    path: '/Editaddress',
    name: 'Editaddress',
    component: () => import('@/components/cart/editaddress.vue'),
    meta: { showTabBar: false },
  },
  // 编辑个人信息
  {
    path: '/EditInformation',
    name: 'EditInformation',
    component: () => import('@/components/my/EditInformation.vue'),
    meta: { showTabBar: false },
  },
  // 订单列表
  {
    path: '/orderlist',
    name: 'orderlist',
    component: () => import('@/components/my/OrderList.vue'),
    meta: { showTabBar: false },
  },
  //支付页
  {
    path: '/PaymentPage',
    name: 'PaymentPage',
    component: () => import('@/components/cart/PaymentPage.vue'),
    meta: { showTabBar: false },
  },
  // 搜索页面
  {
    path: '/search',
    name: 'search',
    component: () => import('@/components/home/Search.vue'),
    meta: { showTabBar: false },
  },
  // 未匹配 404
  {
    path: '*',
    name: 'unmatched',
    component: () => import('@/views/unmatched/index.vue'),
    meta: { showTabBar: false },
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

// 路由守卫
// 路由白名单: 解释: 白名单中的路由, 不需要登录就可以访问
const whiteList = [
  '/login',
  '/register',
  '/textmessage',
  '/loginpermission',
  '/home',
  '/',
  '/search',
];

// 路由守卫
router.beforeEach((to, from, next) => {
  // ✅ 先处理重定向：如果目标是 /，直接放行（会自动跳 home）
  if (to.path === '/') {
    next(); // 放行，让 redirect 自动跳转
    return;
  }

  // ✅ 再检查白名单
  if (whiteList.includes(to.path)) {
    next();
    return;
  }

  // 检查登录状态
  if (localStorage.getItem('userinfo')) {
    next();
  } else {
    next('/loginpermission');
  }
});

export default router;
